<template>
  <div class="ques">
    <p class="q-cont">
      {{ quesData.totalSort ? quesData.totalSort + '.' : '' }}<span v-html="quesData.questionContent"></span>{{ quesData.score ? '（' + quesData.score + '分）' : '' }}
    </p>
    <el-button type="primary" class="btn" @click="handleStartProgram" v-if="!showAnswer">开始编程</el-button>
    <el-button
      v-if="showAnswer"
      :disabled="!quesData.status"
      type="primary"
      class="btn"
      @click="handleViewCode(quesData.lang, quesData.studentAnswer)"
    >我的答案</el-button>
    <p :class="`notice ${!quesData.status ? 'undone' : ''}`">
      <template v-if="quesData.status">此题已作答</template>
      <template v-if="!quesData.status">请点击“开始编程”按钮填写答案</template>
    </p>
    <div class="answer-area" v-if="showAnswer">
      <dl>
        <dt>答案：</dt>
        <dd>
          <el-button type="primary" @click="handleViewCode(quesData.lang, quesData.rightAnswer)">查看代码</el-button>
        </dd>
      </dl>
      <dl>
        <dt>得分：</dt>
        <dd>{{ quesData.studentScore }}</dd>
      </dl>
      <dl>
        <dt>解析：</dt>
        <dd>{{ quesData.analysis ? quesData.analysis : '略' }}</dd>
      </dl>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { PROGRAMURL } from '@/utils/constants';

@Options({
  props: {
    onStartProgram: Function,
    onChange: Function,
    quesData: Object,
    showAnswer: Boolean,
  },
})
export default class Program extends Vue {
  PROGRAMURL = PROGRAMURL;
  $store: any;
  token = localStorage.getItem('token'); // 是否登录
  onStartProgram!: (data: ObjectT) => {};
  quesData: ObjectT = {};

  // 点击开始编程
  handleStartProgram() {
    if (this.onStartProgram) {
      this.onStartProgram(this.quesData);
    }
  }
  // 获取编程题类型名称
  getLangName(lang: number) {
    let langName = '';
    switch (lang) {
      case 2:
        langName = 'scratch';
        break;
      case 3:
        langName = 'python';
        break;
      default:
        break;
    }
    return langName;
  }
  // 查看代码
  handleViewCode(lang: number, ans: string) {
    const langName = this.getLangName(lang);
    const url = `${PROGRAMURL}${langName}/?token=${this.token}${ans ? `&codeUrl=${ans}` : ''}`;
    window.open(url, '_blank');
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import './common.scss';
.ques {
  margin-bottom: 42px;
}
.q-cont {
  span {
    p {
      display: inline;
    }
  }
}
.btn {
  width: 77px;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 0;
  min-height: auto;
}
.notice {
  border: 1px solid $border-color;
  border-radius: 4px;
  min-height: 53px;
  word-break: break-all;
  font-size: 16px;
  color: $color-primary;
  &.undone {
    color: $color-error;
  }
}
.answer-area {
  margin-top: 29px;
  button {
    width: 77px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    padding: 0;
    margin-top: -10px;
    min-height: auto;
  }
}
</style>
<style lang="scss">
.ques {
  img {
    display: inline-block;
    vertical-align: middle;
    max-width: 95%;
  }
}
</style>
